<template>
	<view>
		<view animation='animationData' :style="changeTop" class="show-main">
			<view class="show-wrap">
				<view class="user-img">
					<image :src='data.userimg' mode=""></image>
				</view>
				<view class="new-data-wrap">
					<view class="main-name">
						{{ data.username }}
					</view>
					<view class="main-data">
						{{ data.message }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"showNewData",
		data() {
			return {
				data:{},
				isShow:true,
				animationData:{},
				changeTop:'',
			};
		},
		
		onLoad() {
			
		},
		created() {
			this.$on('shownewdata',(data)=>{
				console.log('=====================')
				this.handleShow(data)
			})
		},
		destroyed() {
			this.$off('shownewdata')
		},
		
		methods:{
			
			// 页面隐藏/显示
			async handleShow(data){
				
				
				this.data = data
				this.upShow()
				
				setTimeout(()=>{
					this.upShow()  // 不你在setTimeout的第一个function 用this
				},3000)
			},
			upShow(){
				this.isShow = !this.isShow
				
				if(this.isShow == true){
				  this.changeTop = `transform: translateY(-112px); transition:all 0.3s ease-in 0s;`
				}else{
				  this.changeTop = `transform: translateY(112px); transition:all 0.3s ease-in 0s;`
				}
			}
		}
	}
</script>

<style lang="less">
	.show-main{
		position: fixed;
		width: 70%;
		top:-200rpx;
		height: 160rpx;
		left: 15%;
		z-index: 200;
		.show-wrap{
			width: 100%;
			height: 100%;
			border-radius: 32rpx;
			background-color: white;
			box-shadow: 0px 20rpx 30rpx 0px rgba(37, 38, 48, 0.2);
			.user-img{
				float: left;
				width: 160rpx;
				height: 160rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 120rpx;
					height: 120rpx;
				}
			}
			
			.new-data-wrap{
				float: left;
				width: calc(100% - 200rpx);
				padding: 32rpx 20rpx 15rpx 20rpx ;
				
				.main-name{
					font-weight: 600;
					font-size: 36rpx;
					display: -webkit-box;
					overflow: hidden; 
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}
				.main-data{
					margin-top: 5rpx;
					display: -webkit-box;
					color:#787878;
					overflow: hidden; 
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}
			}
		}
	}
</style>
